<template>

  <div class="box-centent">
    <el-dialog title="作业详情" :visible.sync="centerDialogVisible" width="30%" center>
      <div class="choice-box">
        <div class="choice-list">
          <div class="list-title">课程名称:
          </div>
          <div>2020-01-16至2020-01-22
          </div>
        </div>
        <div class="choice-list">
          <div class="list-title">课程章节:
          </div>
          <div>2020-01-16至2020-01-22
          </div>
        </div>
        <div class="choice-list">
          <div class="list-title">作业内容:
          </div>
          <div>
            <div>2020-01-16至2020-01-22</div>
            <div>2020-01-16至2020-01-22</div>
          </div>
        </div>
        <div class="choice-list">
          <div class="list-title">作业附件:
          </div>
          <div>《如何增长黑客》作业说明.doc
          </div>
        </div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="完成作业">
            <el-input type="textarea" v-model="form.desc"></el-input>
          </el-form-item>
        </el-form>
        <div class="upload-box">
          <div>附件</div>
          <div>
            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList">
              <el-button size="small" type="primary" class="upload-btn">上传</el-button>
            </el-upload>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <div class="nav-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>课程学习</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: 'knowledge' }">通识课</el-breadcrumb-item>
        <el-breadcrumb-item>详情</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="nav-search">
        <el-input size="mini" placeholder="输入你要找的内容" prefix-icon="el-icon-search" v-model="search"></el-input>
      </div>
    </div>
    <div class="details-box">
      <el-image style="width: 460px; height: 240px; border-radius:8px" :src="url"></el-image>
      <div class="details-content">
        <div class="title">基于车联网的自动红绿灯控制系统</div>
        <div class="content">
          <div class="list">
            <div class="list-title">课程简介:
            </div>
            <div class="list-content">项目/点子， 团队， 商业模式 融资， 时机，这五者中最关键的是什么呢？结果出人意料……
            </div>
          </div>
          <div class="list">
            <div class="list-title">主讲人:
            </div>
            <div>张老师
            </div>
          </div>
          <div class="function">
            <el-button type="primary">在线交流</el-button>
            <el-button type="danger">开始学习</el-button>
          </div>
        </div>
      </div>

    </div>
    <div class="prospectus-box">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="课程章节" name="first">
          <div class="prospectus-content">
            <div class="details">
              <div class="details-list">
                <div class="tilte-box">
                  <div class="title-left">第一章</div>
                  <div>创业成功最大要素</div>
                </div>
                <div class="chapter-box">
                  <div class="chapter">
                    <div>
                      第一节:
                    </div>
                    <div class="chapter-list">
                      <div class="time">
                        2020-01-16至2020-01-22
                      </div>
                      <div class="content-box">
                        <div class="content-title">作业:</div>
                        <div>
                          如何增长黑客？
                        </div>
                        <el-button type="primary" @click="centerDialogVisible = true">查看</el-button>
                      </div>
                    </div>
                  </div>
                  <div class="chapter">
                    <div>
                      第二节:
                    </div>
                    <div class="chapter-list">
                      什么是团队？
                    </div>
                  </div>
                  <div class="chapter">
                    <div>
                      第三节:
                    </div>
                    <div class="chapter-list">
                      什么是团队？
                    </div>
                  </div>
                </div>
              </div>
              <div class="details-list">
                <div class="tilte-box">
                  <div class="title-left">第二章</div>
                  <div>创业成功最大要素</div>
                </div>
                <div class="chapter-box">

                  <div class="chapter">
                    <div>
                      第二节:
                    </div>
                    <div class="chapter-list">
                      什么是团队？
                    </div>
                  </div>
                  <div class="chapter">
                    <div>
                      第三节:
                    </div>
                    <div class="chapter-list">
                      什么是团队？
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="评价" name="second">
          <div class="prospectus-content">
            <div class="details">

              <div class="details-list">
                <div class="tilte-box">
                  <div class="title-left">第二章</div>
                  <div>创业成功最大要素</div>
                </div>
                <div class="chapter-box">

                  <div class="chapter">
                    <div>
                      第二节:
                    </div>
                    <div class="chapter-list">
                      什么是团队？
                    </div>
                  </div>
                  <div class="chapter">
                    <div>
                      第三节:
                    </div>
                    <div class="chapter-list">
                      什么是团队？
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </el-tab-pane>
      </el-tabs>

    </div>
  </div>

</template>

<script>
export default {
  data () {
    return {
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      url:
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      activeName: 'first',
      centerDialogVisible: false,

      form: {
        desc: ''
      },
      search: ''
    }
  },
  methods: {
    handleClick (tab, event) {
      // console.log(tab, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.box-centent {
  /deep/.el-dialog__wrapper {
    .el-dialog {
      margin-top: 30vh !important;
      background: #f5f7ff;
      border-radius: 8px;
      width: 37% !important;
      .el-dialog__header {
        .el-dialog__title {
          font-size: 22px;
          color: rgba(6, 17, 37, 1);
          font-weight: 600;
        }
      }
    }
    .el-dialog__body {
      padding-bottom: 0px;
      padding-top: 0px;
      .choice-box {
        padding: 0 55px;
        .choice-list {
          margin-top: 18px;
          display: flex;
          font-size: 16px;
          color: rgba(51, 69, 102, 1);
          .list-title {
            font-size: 16px;
            color: rgba(19, 35, 64, 1);
            font-weight: 550;
            margin-right: 5px;
          }
        }
        .el-form {
          margin-top: 18px;
          .el-form-item__label {
            font-size: 16px;
            color: rgba(19, 35, 64, 1);
            font-weight: 550;
            padding-right: 14px;
          }
          .el-textarea__inner {
            height: 150px !important;
            background: #f5f7ff;
          }
        }
        .upload-box {
          padding-left: 40px;
          font-size: 16px;
          color: rgba(19, 35, 64, 1);
          font-weight: 550;
          display: flex;
          /deep/.upload-demo {
            .upload-btn {
              margin-top: 0;
              margin-left: 8px;
              padding: 2px 8px;
              font-size: 14px;
              color: rgba(255, 255, 255, 1);
              background: linear-gradient(
                135deg,
                rgba(91, 192, 251, 1) 0%,
                rgba(46, 141, 246, 1) 100%
              );
            }
          }
        }
      }
    }
    /deep/.el-button--primary {
      margin-top: 20px;
      padding: 12px 62px;
      background: linear-gradient(
        135deg,
        rgba(91, 192, 251, 1) 0%,
        rgba(46, 141, 246, 1) 100%
      );
    }
  }
}
.nav-box {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 18px 0;
  /deep/.el-breadcrumb {
    flex: 1;
  }
  .nav-search {
    display: flex;
    align-items: center;
    /deep/ .el-input {
      width: 85%;
      .el-input__inner {
        border-radius: 12px;
        height: 21px;
        line-height: 21px;
        padding-left: 15px;
        background: #f5f7ff;
      }
    }
    /deep/ .el-input__prefix {
      left: 115px;
      .el-icon-search {
        line-height: 21px;
      }
    }
  }
}
.details-box {
  display: flex;

  align-items: center;
  padding: 28px;
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  .details-Image {
    width: 460px;
    height: auto;
  }

  .details-content {
    flex: 1;
    padding-left: 20px;

    .title {
      font-size: 18px;
      font-weight: 900;
      color: rgba(6, 17, 37, 1);
    }
    .content {
      padding-top: 24px;
      font-size: 16px;
      color: rgba(19, 35, 64, 1);
      .list {
        display: flex;
        margin-bottom: 17px;
        font-size: 16px;
        color: rgba(51, 69, 102, 1);
        .list-title {
          font-size: 16px;
          color: rgba(19, 35, 64, 1);
          font-weight: 600;
          margin-right: 5px;
        }
        .list-content {
          width: 588px;
          min-width: 588px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
    }
  }
  .function {
    margin-top: 70px;
    /deep/.el-button {
      padding: 10px 44px;
    }
    /deep/.el-button--primary {
      background: linear-gradient(
        135deg,
        rgba(91, 192, 251, 1) 0%,
        rgba(46, 141, 246, 1) 100%
      );
    }
    /deep/.el-button--danger {
      background: linear-gradient(
        314deg,
        rgba(245, 131, 146, 1) 0%,
        rgba(254, 81, 96, 1) 100%
      );
    }
  }
}
.prospectus-box {
  padding: 10px 0 97px 0;
  /deep/ .el-tabs {
    .el-tabs__nav-wrap {
      background-color: none !important;
      &::after {
        background-color: transparent;
      }
      .el-tabs__item {
        font-weight: 900;
        font-size: 20px;
        color: rgba(6, 17, 37, 1);
      }
      .el-tabs__item.is-active {
        color: none !important;
      }
      .el-tabs__item:hover {
        color: none;
      }
    }
  }
  .details {
    padding-bottom: 128px;
    .details-list {
      margin-top: 28px;
      .tilte-box {
        display: flex;
        align-items: center;
        font-size: 18px;
        color: rgba(19, 35, 64, 1);
        font-weight: 600;
        .title-left {
          margin-right: 8px;
        }
      }
      .chapter-box {
        padding-left: 48px;
        .chapter {
          margin-top: 18px;
          display: flex;
          font-size: 16px;
          color: rgba(19, 35, 64, 1);
          font-weight: 550;
          .chapter-list {
            font-size: 16px;
            margin-left: 8px;
            color: rgba(51, 69, 102, 1);
            .content-box {
              margin-top: 12px;
              display: flex;
              align-items: center;
              .content-title {
                margin-left: 5px;
              }
              /deep/.el-button {
                padding: 3px 10px;
                margin-left: 10px;
                font-size: 14px;
              }
              /deep/.el-button--primary {
                background: linear-gradient(
                  135deg,
                  rgba(91, 192, 251, 1) 0%,
                  rgba(46, 141, 246, 1) 100%
                );
              }
            }
          }
        }
      }
    }
  }
}
</style>
